<template>
  <div  class="carousel-item-container" ref="container" @mousemove="hanlermouse" @mouseleave="hanlerleave" >
      <div class="imageLoader-container" ref="iner" :style="imageposition">
        <ImageLoader :src="resources.bigImg"  :placeholder="resources.midImg" @load="this.setTitle"></ImageLoader>
      </div>
      <div class="title" ref="title">
        {{resources.title}}
      </div>
      <div class="description" ref="desc">
        {{resources.description}}
      </div>
      
  </div>
</template>

<script>
// import e from 'express';
// import { get } from 'http';
import ImageLoader from '../../components/ImageLoader/index.vue';
export default {
  data(){
    return {
      titleWidth:0,
      descWidth:0,
      containerSize:null,
      inerSize:null,
      mouseX:0,
      mouseY:0,
      // isloadingImg:true,
    }
  },
 props:{
    resources:[],
 },
    components: { ImageLoader, },
mounted(){
 this.titleWidth=this.$refs.title.clientWidth;
 this.descWidth=this.$refs.desc.clientWidth;
//  console.log(this.titleWidth,this.descWidth)
this.getSize();
window.addEventListener('resize',this.getSize)
// this.mouseX=this.initial.X;
// this.mouseY=this.initial.Y

this.getSize();
},
destroyed(){
  window.removeEventListener('resize',this.getSize);
},
computed:{
imageposition(){
  if(!this.containerSize||!this.inerSize){
    return;
  }
 const extraWhide=this.inerSize.inerWidth-this.containerSize.Width;//额外的宽度
 const extraHeight=this.inerSize.inerHeight-this.containerSize.Height;//额外的高度
const left=-extraWhide/this.containerSize.Width*this.mouseX;//算出图片所需要的left值
const top=-extraHeight/this.containerSize.Height*this.mouseY;//算出图片所需要的top值
// console.log(left,top)
 return{
 transform:`translate(${left}px,${top}px)`//进行赋值
 }

},
 initial(){

   return{
    X :this.containerSize.Width/2,//确定中心位置的坐标，用来鼠标没有在容器内准备的
    Y:this.containerSize.Height/2,
   }
 }
},

 methods:{
setTitle(){
  //设置不透明，但是宽度为零 并且添加过度
  //标题跟描述一样
this.$refs.title.style.width=0;
this.$refs.title.style.opacity=1;
//设置描述语句
this.$refs.desc.style.width=0;
this.$refs.desc.style.opacity=1;
//获取页面数据，让其重新重新渲染
this.$refs.title.clientWidth;
this.$refs.desc.clientWidth;
this.$refs.title.style.transition='1s';
this.$refs.desc.style.transition='2s 1s';
//这时候再去设置biotic跟表述的宽度，这样就可以可以做出渐进式展示文字
this.$refs.title.style.width=this.titleWidth+'px';
this.$refs.desc.style.width=this.descWidth+'px';
},
getSize(){//获取容器宽度高度，图片容器宽和高
  // if()
  this.containerSize={
    Width:this.$refs.container.clientWidth,
    Height:this.$refs.container.clientHeight,
  }
 this.inerSize={
   inerWidth:this.$refs.iner.clientWidth,
   inerHeight:this.$refs.iner.clientHeight,
 }
  
},
hanlermouse(e){//s鼠标移动事件。获取容器到视口的距离
  const rect=this.$refs.container.getBoundingClientRect();
// console.log(e);
  this.mouseX=e.clientX - rect.left;//计算鼠标在到容器的left值
  this.mouseY=e.clientY - rect.top;//top值
  // console.log(this.mouseX,this.mouseY)
},
hanlerleave(){
  this.mouseX=this.initial.X;//鼠标移出设置鼠标位置为中心点，这样能让图片中心显示
  this.mouseY=this.initial.Y;
}
 }
 }

</script>

<style lang="less" scoped>
@import "../../style/var.less";
.carousel-item-container{
  position: relative;
    width: 100%;
    height: 100%;
    background:@dark;
    overflow:hidden;
    .imageLoader-container{
      position: absolute;
      transition:0.3s;
      width: 110%;
      height: 110%;

    // z-index: -1;
    }
    .title,.description{
     position: absolute;
     color: #fff;   
     font-family: "楷体";
     opacity: 0;
     white-space: nowrap;
     overflow: hidden;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5),-1px 0 0 rgba(0, 0, 0, 0.5), 0 1px  0 rgba(0, 0, 0, 0.5),0 -1px  0 rgba(0, 0, 0, 0.5);
    }
    .title{
      top: calc(50% - 100px);
      left: 20px;
      font-size:2.2em;
    }
   .description{
     top: calc(50% - 20px);
      left: 20px;
      font-size:1.7em;
   }
}
</style>